<template>
  <div class="app-container">
    <el-row>
      <el-form :inline="true" :model="cartForm" class="demo-form-inline">
        <el-col :span="24"><div class="grid-content bg-purple-dark bg-purple-dark-Top">
          <el-row type="flex" class="row-bg">

            <el-col :span="8"><div class="grid-content bg-purple-light">
              <el-form-item prop="truckTypeId" label="车辆类型" :label-width="formLabelWidth">
                <el-select v-model="cartForm.truckTypeId" clearable placeholder="请选择">
                  <el-option
                    v-for="item in cart_type"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">

              <el-form-item label="车牌号码:">
                <el-input v-model="cartForm.licensePlate" placeholder="请输入车牌号码" />
              </el-form-item>

            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">
              <el-form-item>
                <el-button type="primary" @click="inquire">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button native-type="reset" @click="reset">重置</el-button>
              </el-form-item>
            </div></el-col>
          </el-row>
        </div></el-col>
      </el-form>
    </el-row>
    <el-row type="flex" class=" row-bg_buttton">
      <el-col :span="1.5"><div class="grid-content bg-purple">
        <el-button style="border: none;" @click="reset">全部{{ pagination.allNum }}</el-button>
      </div></el-col>
      <el-col :span="1.5"><div class="grid-content bg-purple-light">
        <el-button style="border: none;" @click="available">可用{{ pagination.availableNum }}</el-button>
      </div></el-col>
      <el-col :span="1.5"><div class="grid-content bg-purple">
        <el-button style="border: none;" @click="deactivate">停用{{ pagination.deactivateNum }}</el-button>
      </div></el-col>
    </el-row>
    <el-row class="row-bg3">
      <el-col :span="24"><div class="grid-content bg-purple-dark remainder">
        <el-row>
          <div>
            <el-button type="primary" style="margin-bottom: 20px;" @click="dialogFormVisible = true">新增车辆</el-button>
          </div>
        </el-row>
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
          />
          <el-table-column
            prop="licensePlate"
            label="车辆号码"
          />
          <el-table-column
            prop="truckTypeName"
            label="车辆类型"
          />
          <el-table-column
            prop="driverNum"
            label="司机数量"
          />
          <el-table-column
            prop="workStatus"
            label="车辆状态"
          >
            <template v-slot="{row}">
              <div v-if="row.workStatus===1" style="display: flex; align-items:center">
                <div class="available" /><span>可用</span>
              </div>
              <div v-else style="display: flex; align-items: center;">
                <div class="notavailable" /><span>停用</span>
              </div>

            </template>
          </el-table-column>
          <el-table-column
            prop="deviceGpsId"
            label="GPS设备ID"
          />
          <el-table-column
            prop="allowableLoad"
            label="实载重量(T)"
          />
          <el-table-column
            prop="allowableVolume"
            label="实载体积(方)"
          />

          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="180"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" class="View_BUtton" @click="viewVehicle(scope.row.id)">查看详情</el-button>
              <div data-v-fadabbee="" class="el-divider el-divider--vertical" />
              <!-- <el-button type="text" size="small" class="View_BUtton">
                <span>{{ scope.row.workStatus===1?'停用':'启用' }}</span>
              </el-button> -->
              <!-- 启用按钮 -->
              <el-button v-if="scope.row.workStatus===0" type="text" size="small" class="View_BUtton" @click="open(scope.row.id)">
                启用
              </el-button>
              <!-- 停用按钮 -->
              <el-button v-else style="color: red;" type="text" size="small" class="View_BUtton" @click="off(scope.row.id)">
                停用
              </el-button>
              <div data-v-fadabbee="" class="el-divider el-divider--vertical" />
              <el-button type="text" size="small" class="View_BUtton" @click="dispositionDriver(scope.row.id)">配置司机</el-button>

            </template>
          </el-table-column>

        </el-table>
        <div class="block" style="text-align: center; margin-top: 20px;">

          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="cartForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

      </div></el-col>
    </el-row>
    <!-- 新增车辆 -->
    <el-dialog width="580px" title="新增车辆" :visible.sync="dialogFormVisible" class="dialog">
      <el-form :data="cartAddForm" :model="cartAddForm" :rules="cartRules">
        <el-form-item prop="truckTypeId" label="车辆类型" :label-width="formLabelWidth">
          <el-select v-model="cartAddForm.truckTypeId" class="dialog_input" placeholder="请选择">
            <el-option v-for="item in cart_type" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="licensePlate" label="车辆号码" :label-width="formLabelWidth">
          <el-input v-model.number="cartAddForm.licensePlate" class="dialog_input" autocomplete="off" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item prop="deviceGpsId" label="GPS设备ID" :label-width="formLabelWidth">
          <el-input v-model.number="cartAddForm.deviceGpsId" class="dialog_input" autocomplete="off" placeholder="请输入GPS设备ID" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="text-align: center;" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVehicle">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 启用车辆 -->
    <el-dialog
      title="车辆启用"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><span>确定要启用吗？车辆启用需满足以下条件：</span></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"><span>1车辆信息已完善</span></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"><span>2绑定司机>=2,且有排班</span> </div></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openClose">取 消</el-button>
        <el-button type="primary" @click="openOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 停用车辆 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="dialogVisibleoff"
      width="30%"
    >
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><span>确定要停用吗？车辆停用需满足以下条件：</span></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"><span>1车辆当前无运输任务</span></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"><span>2车辆无关联运输线路</span> </div></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><span style="color: #ffb302;">注：停用后司机将自动解除绑定</span></div></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="offClose">取 消</el-button>
        <el-button type="primary" @click="offOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击配置司机1 车辆配置 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="cartDisposition"
      width="30%"
    >
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><span>配置司机需满足以下条件：</span></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"><span>1车辆信息已完善</span></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"><span>2车辆无未完成运输任务</span> </div></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="driverOneClose">取 消</el-button>
        <el-button type="primary" @click="cartDispositionOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击配置司机2 配置司机 -->
    <el-dialog
      title="配置司机"
      :visible.sync="allocationDriver"
      width="40%"
    >
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark" style="padding: 20px 20px 0 20px; margin-top: -15px; margin-bottom: 15px; background-color: #fbfafa; ">

          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple"><label style="color: #20232a;font-weight: normal;">车牌号:</label><span>{{ cartDetail.licensePlate }}</span> </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"><label style="color: #20232a;font-weight: normal;">车型:</label><span>{{ cartDetail.truckTypeName }}</span></div></el-col>
          </el-row>
          <el-row style="margin-top: -10px;">
            <el-col :span="12"><div class="grid-content bg-purple"><label style="color: #20232a;font-weight: normal;">车辆状态:</label><span>{{ cartDetail.runStatus===1?'可用':'停用' }}</span> </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"><label style="color: #20232a;font-weight: normal;">实载重量:</label><span>{{ cartDetail.allowableLoad }}</span></div></el-col>
          </el-row>
          <el-row style="margin-top: -20px;">
            <el-col :span="12"><div class="grid-content bg-purple"><label style="color: #20232a;font-weight: normal;">实载体积:</label><span>{{ cartDetail.allowableVolume }}</span> </div></el-col>
          </el-row>

        </div></el-col>
      </el-row>
      <template>
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item label="配置司机">

            <el-select
              v-model="defaultDriverData"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签"
              @remove-tag="removeTag"
            >
              <el-option
                v-for="(item,index) in driverData"
                :key="index"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>

        </el-form>

        <el-table
          v-loading.lock="loadingDriver"
          :data="driverData"
          stripe
          style="width: 100%"
        >

          <el-table-column

            type="index"
            label="序号"
            width="180px"
          />
          <el-table-column
            prop="name"
            label="司机名称"
          />
          <el-table-column

            label="操作"
          >
            <template slot-scope="scope">
              <el-button style="color: #419eff;" type="text" size="small" @click="viewDriver(scope.row.userId)">查看</el-button>
              <el-button style="color: #419eff;" type="text" size="small" @click="delDriver(scope.row.id)">删除</el-button>
            </template>

          </el-table-column>
          <div slot="empty" class="empty">
            <el-empty
              image="https://fe-slwl-manager.itheima.net/static/img/pic-kong.742d3899.png"
              description="这里空空如也"
              style="height: 200px;"
            />
          </div>
        </el-table>

      </template>
      <div style="text-align: center; margin-top: 15px;">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="bindDriverOk">确 定</el-button>
          <el-button @click="allocationDriver = false">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  renderList,
  getCart_typeList,
  addVehicle,
  cartNum,
  open,
  off,
  dispositionDriver,
  getCartDetail,
  bindDriver
} from '@/api/cart'
export default {
  data() {
    return {
      loadingDriver: false, // 加载司机列表
      defaultDriverData: [],
      // 司机表格数据
      driverData: [],
      driverIds: [], // 绑定司机id数组
      cartDetail: {
        licensePlate: 123456
      },

      loading: true,
      cartForm: {
        truckTypeId: '', // 车型类型
        workStatus: '', // 车辆状态  1为可用 0为停用
        licensePlate: '', // 车牌号码
        page: 1, // 页码
        pageSize: 10 // 每页多少条
      },
      // 新增车辆表单
      cartAddForm: {
        licensePlate: '', // 车牌号码
        truckTypeId: '', // 车型类型id
        deviceGpsId: '' // GPS设备id
      },
      cart_type: [], // 车型信息列表
      // 校验规则
      cartRules: {
        truckTypeId: [
          { required: true, message: '车型不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      // 车辆管理基础分页数据渲染
      pagination: {
        // page: 1, // 页码
        // pageSize: 10, // 每页多少条
        total: null, // 总条数 / 全部车辆数
        availableNum: null, // 可用车辆数
        deactivateNum: null, // 停用车辆数
        allNum: null // 全部车辆
      },
      currentPage4: 1, // 前往第几页默认数据
      tableData: [], // 分页数据

      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible: false, // 车辆 启用对话框
      dialogVisibleoff: false, // 车辆 停用对话框
      cartDisposition: false, // 车辆配置对话框
      allocationDriver: false, // 配置司机对话框
      rowId: null, // 储存点击启用/停用/配置司机获取的行id
      formLabelWidth: '120px'
    }
  },
  async  created() {
    this.renderList()
    this.getCart_typeList()
    // 统计车辆数量
    const result = await cartNum()
    console.log(result)
    // 赋值存储
    this.pagination.deactivateNum = result[0]
    this.pagination.availableNum = result[1]
    this.pagination.allNum = (+result[0]) + (+result[1])
  },
  methods: {
    fn(value) {
      console.log(value)
    },
    // 基础渲染
    async renderList() {
      this.loading = true
      const result = await renderList(
        this.cartForm
      )
      console.log(result)
      this.tableData = result.items // 将返回的数据赋值给绑定的数组
      this.pagination.total = +result.counts
      console.log(this.pagination.total)
      this.loading = false
    },
    // 查询检索
    inquire() {
      this.renderList()
    },
    // 点击重置渲染基础数据  点击全部跟重置效果一样
    reset() {
      this.cartForm.truckTypeId = '' // 车型类型
      this.cartForm.licensePlate = '' // 车型号码
      this.cartForm.workStatus = null
      this.renderList()
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.cartForm.pageSize = val
      this.renderList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.cartForm.page = val
      console.log(this.cartForm.page)
      this.renderList()
    },
    // 车型信息列表
    async getCart_typeList() {
      const result = await getCart_typeList()
      console.log(result)
      this.cart_type = result
      console.log(this.cart_type)
    },
    // 新增车辆 点击确定
    async  addVehicle() {
      this.dialogFormVisible = false
      await addVehicle(this.cartAddForm)
      this.$message.success('新增成功')
      this.renderList()

      this.cartAddForm.licensePlate = ''// 车牌号码
      this.cartAddForm.truckTypeId = ''// 车型类型id
      this.cartAddForm.deviceGpsId = '' // GPS设备id
    },
    // 渲染可用车辆  车辆状态为1
    available() {
      this.cartForm.page = 1
      this.cartForm.workStatus = 1
      this.renderList()
    },
    // 渲染停用车辆 车辆状态为 0
    deactivate() {
      this.cartForm.workStatus = 0
      this.renderList()
    },
    // 启用车辆
    async open(id) {
      this.dialogVisible = true
      // await open(id)
      this.rowId = id
      console.log(this.rowId)
    },
    // 启用点击确定
    async openOk() {
      open(this.rowId).then(() => {}).catch(() => {

      })
      this.dialogVisible = false
    },
    // 启用点击取消
    openClose() {
      this.$message('已取消')
      this.dialogVisible = false
    },
    // 启用车辆
    async off(id) {
      this.dialogVisibleoff = true
      // await open(id)
      this.rowId = id
      console.log(this.rowId)
    },
    // 停用点击确定
    async offOk() {
      off(this.rowId).then(() => {}).catch(() => {

      })
      this.dialogVisibleoff = false
    },
    // 停用点击取消
    offClose() {
      this.$message('已取消')
      this.dialogVisibleoff = false
    },
    // 点击配置司机
    async dispositionDriver(id) {
      this.defaultDriverData = [] // 每次获取司机列表先将列表清空
      this.driverData = [] // 每次点击配置司机清空司机列表
      this.driverIds = [] // 每次点击配置司机将司机Id数组清空
      this.cartDisposition = true // 显示弹框
      this.rowId = id
      console.log(this.rowId)

      const result = await dispositionDriver(this.rowId)
      // 调用获取详情的方法
      // this.getCartDetail(this.rowId)
      console.log(result)
      // const newArr = result.filter(function(ele) {
      //   return ele.name// filter的条件 , 需要通过回调函数的return返回
      // })
      // console.log(newArr)
      this.driverData = result
      // this.loadingDriver = false
      this.driverData.forEach((item) => {
        this.defaultDriverData.push(item.name)
        this.driverIds.push(item.userId)
      })
      console.log(this.defaultDriverData)
      console.log(this.driverIds)
    },
    // 点击车辆配置对话框 确定 弹出下一个对话框
    // 然后发起请求获取司机
    async cartDispositionOk() {
      // this.loadingDriver = true
      this.getCartDetail(this.rowId)
      this.cartDisposition = false
      this.allocationDriver = true
    },
    // 配置司机对话框里的车辆详信息
    async  getCartDetail(id) {
      const cartDetail = await getCartDetail(id)
      this.cartDetail = cartDetail
      console.log(this.cartDetail)
    },
    // 配置司机 点击删除司机
    delDriver(id) {
      console.log(id)
      const index = this.driverData.findIndex(ele => ele.id === id)
      console.log(index)
      const delItem = this.driverData.splice(index, 1)
      console.log(delItem)
      console.log(delItem[0])
      // this.driverData.splice(index, 1) // 表格中删除司机 文本框绑定的数据也要将此数据删除
      const defaultIndex = this.defaultDriverData.findIndex(ele => ele === delItem[0].name)
      this.defaultDriverData.splice(defaultIndex, 1)
      const driverIdsIndex = this.driverIds.findIndex(ele => ele === delItem[0].userId)
      this.driverIds.splice(driverIdsIndex, 1)
      console.log(this.driverIds)
    },
    // 点击tag标签X删除司机   获取删除的tag标签数据 然后找到driverData中的数据也删除实现同步
    removeTag(tag) {
      console.log(tag)
      const index = this.driverData.findIndex(ele => ele.name === tag)
      this.driverData.splice(index, 1)
    },
    // 配置司机 点击取消
    async driverOneClose() {
      this.$message('已取消')
      this.cartDisposition = false
    },
    // 点击确定安排司机
    async bindDriverOk() {
      await bindDriver({ driverIds: this.driverIds, truckId: this.rowId })
      this.$message.success('安排司机成功')
    },
    // 配置司机 点击查看司机详情
    viewDriver(id) {
      console.log(id)
      this.$router.push({ path: '/car/driverdetail', query: { id: id }})
    },
    // 点击查看车辆详情
    viewVehicle(id) {
      console.log(id)
      this.$router.push({ path: '/car/vehicledetails', query: { id: id }})
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark-Top {
    background: #fff;
    padding:10px 8px 0px 50px
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;

  }
  .row-bg {
    padding: 10px 0;
/*     background-color: #f9fafc; */
  }
// .el-input,
// .el-select
// {
// width: 400px;
// }
.bg-purple{
  display: flex;
}

.View_BUtton{
  color: #419eff;
}
.row-bg2{
  margin-top: -20px;
}
.row-bg3{
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    margin-top: 20px;
    padding: 10px 0;
    background-color: #fff;
  }
  .row-bg_buttton{
    margin-top: 20px;
    padding: 0 0;
    background-color: #fff;
  }
  .row-bg_buttton .el-button{
    height: 50px;
    width: 120px;
  }
  ::v-deep .el-dialog__header{

border-radius: 10px;
}
::v-deep .el-dialog{
border-radius: 10px;
background-color: #f3f4f7;
}
::v-deep .el-dialog__body{
background-color: #fff;
// text-align: center;
}
::v-deep .el-dialog__footer{
background-color: #fff;
border-radius: 10px;
text-align: right;
// text-align: center;
}
.dialog_input{
  width: 350px;
}
// ::v-deep .el-dialog__footer{
//   text-align: right;
// }
  // .el-table{
  //   border: 1px solid #ebeef5;
  // }
  .available{
    width: 5px;
    height: 5px;
    background-color: #1dc779;
    border-radius: 50%;
    margin-right: 5px;
  }
  .notavailable{
    width: 5px;
    height: 5px;
    background-color: #e15536;
    border-radius: 50%;
    margin-right: 5px;
  }
</style>

